<template>
  <Container>
    <template v-slot:content>
      <TapList :tapList="energyList" :tapProps="{
        label: 'energyName',
        name: 'energyId'
      }" @handleClickTabs="handleClickTabs">
        <div class="historicalEnergyData">
          <div class="title">
            <span class="readingData">所选时间累计能耗量：{{ consumptionValue }}{{ energyUnit }}</span>
            <SelectDatePicker @handleChangeDate="handleChangeDate" @getApi="getApi"></SelectDatePicker>
          </div>
          <div class="content">
            <div class="treeContent">
              <TreeList titleName="选择区域" :treeData="areaList" :nodeKey="'areaId'" :treeProps="{
                label: 'areaName',
                children: 'child'
              }" @handleNodeClick="getTreeNode"></TreeList>
            </div>
            <div class="tableContent">
              <div class="tableTitle">当天能耗用量</div>
              <div class="table">
                <TableData :tableThead="tableThead" :dataList="dataList" :page="page" :size="size" :total="total"
                  @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
                  <template v-slot:consumption="{ row }">
                    {{ row.consumption }}{{ row.energyUnit }}
                  </template>
                </TableData>
              </div>
            </div>
          </div>
        </div>
      </TapList>
    </template>
  </Container>
</template>

<script>
import Container from "@/components/Container"
import TapList from "@/components/TapList"
import FacilityTree from "@/components/FacilityTree"
import SelectDatePicker from "@/components/SelectDatePicker"
import TreeList from "@/components/ElTree"
import areaApi from '@/api/area'
import energyApi from '@/api/energy'
import dataQueryApi from "@/api/dataQuery"

export default {
  name: 'HistoricalEnergyData',
  components: {
    TapList,
    FacilityTree,
    SelectDatePicker,
    Container,
    TreeList
  },
  data() {
    return {
      loading: false,
      size: 10,
      page: 1,
      total: 10,
      searchFormData: {},
      dataApi: '',
      dataList: [],
      areaList: [],
      areaId: '',
      energyList: [],
      energyUnit: '',
      energyId: '',
      consumptionValue: '',
      tableThead: [
        { label: '日期/时间', prop: 'recordTime' },
        { label: '能源类型', prop: 'energyName' },
        { label: '能源数据', slotName: 'consumption' },
      ],
    }
  },
  mounted() {
    this.queryEnergy();
    this.queryArea();
  },
  methods: {
    async queryArea() {
      this.areaList = [];
      let { data: areaList } = await areaApi.queryTreeByCondition({});
      this.areaList = areaList || [];
      this.areaId = this.areaList[0]?.areaId;
      this.searchFormData.areaId = this.areaId;
      this.$nextTick(() => {
        this.queryPageByCondition();
      })
    },
    async queryEnergy() {
      let { data: energyList } = await energyApi.queryByCondition({});
      this.energyList = energyList || [];
      this.energyId = this.energyList[0]?.energyId;
      this.searchFormData.energyId = this.energyId;
      this.queryPageByCondition();
    },
    queryConsumption() {
      let { areaId, energyId, startTime, endTime } = this.searchFormData;
      this.loading = true;
      if (energyId && startTime && endTime) {
        dataQueryApi.queryConsumption({ areaId, energyId, startTime, endTime }).then(res => {
          this.loading = false;
          this.consumptionValue = res.data || 0
        })
      } else {
        this.consumptionValue = 0
      }
    },
    handleChangeDate(dateList) {
      this.searchFormData = {
        startTime: dateList[0] + ' 00:00:00',
        endTime: dateList[1] + ' 23:59:59',
        areaId: this.areaId,
        energyId: this.energyId
      }
      this.queryPageByCondition();
    },
    getApi(dataApi) {
      this.dataApi = dataApi
    },
    handleClickTabs(e) {
      if (e && e.energyId) {
        this.energyId = e.energyId;
        this.energyUnit = e.energyUnit
        this.searchFormData.energyId = this.energyId;
        this.queryPageByCondition();
      }
    },
    getTreeNode(node) {
      this.areaId = node.areaId;
      this.searchFormData.areaId = this.areaId;
      this.queryPageByCondition();
    },
    queryPageByCondition() {
      let { areaId, energyId, startTime, endTime } = this.searchFormData;
      if (areaId && energyId && startTime && endTime) {
        let params = {
          page: this.page,
          size: this.size,
          entity: {
            ...this.searchFormData,
            organizationNo: sessionStorage.organizationNo
          },
        }
        this.queryConsumption();
        this.dataApi && this.dataApi(params).then(res => {
          this.loading = false;
          if (res.code == 1) {
            let { content, totalElements } = res.data || {}
            this.dataList = content || [];
            console.log(totalElements)
            this.total = totalElements || 10;
            this.dataList.forEach(e => {
              e.energyUnit = this.energyUnit;
            })
          } else {
            this.dataList = [];
          }
        }).catch(err => {
          this.loading = false;
        })
      } else {
        this.dataList = [];
        this.consumptionValue = 0
      }
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    handleSizeChange(size) {
      this.size = size;
      this.queryPageByCondition();
    },
  }
}
</script>

<style lang="scss" scoped>
.historicalEnergyData {
  width: 100%;
  height: 100%;

  .title {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .readingData {
      padding: 0 20px;
      font-size: 20px;
    }
  }

  .content {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    justify-content: space-between;

    .treeContent {
      width: 20%;
      height: 100%;
      background-color: #ffffff;
      border-radius: 5px;
    }

    .tableContent {
      width: calc(80% - 10px);
      height: 100%;
      margin-left: 10px;
      background-color: #ffffff;
      padding: 15px;
      border-radius: 5px;

      .tableTitle {
        line-height: 30px;
      }

      .table {
        width: 100%;
        height: calc(100% - 30px);
        font-size: 18px;
      }
    }
  }
}
</style>
